<template>
  <div>
    <el-card style="float: left; width: 700px; margin: 10px;">
      <el-divider content-position="left"></el-divider>
      <el-form>
        <div class="card-wrapper" style="position: relative; margin-top: 20px;" >
          <span
            style="position: absolute; top: -35px; background: rgb(255, 255, 255); padding: 0 50px;"
          >老人信息</span>
          <el-card class="box-card custom-card">
            <el-row>
              <el-col :span="12">
                <el-form-item class="my-color" label="老人姓名" label-width="100px">
                  <el-input v-model="user.name" @focus="lookVisible=true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="老人档案" label-width="100px">
                  <el-input v-model="user.userNum" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="入院时间" label-width="100px">
                  <el-input v-model="user.inTime" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入院区域" label-width="100px">
                  <el-input v-model="user.areaName" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="床位号" label-width="100px">
                  <el-input v-model="user.number" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入院房间" label-width="100px">
                  <el-input v-model="user.roomnum" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="性别" label-width="100px">
                  <el-input v-model="user.gender" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="老人年龄" label-width="100px">
                  <el-input v-model="user.age" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <!-- 查看老人的的弹框 label-width:是label文字占的宽度-->
          <el-dialog title="选择老人" :visible.sync="lookVisible">
            <el-row>
              <el-col :span="24">
                <!-- 放搜索条件 
                :inline="ture"让表单元素占一行,一行不够会换行-->
                <el-form :inline="true">
                  <el-form-item label="老人姓名">
                    <el-input
                      v-model="orderParam1.name"
                      placeholder="老人姓名"
                      suffix-icon="el-icon-search"
                      @click.native="queryInCare"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="24">
                <el-table :data="selectData" style="width: 100%" @row-click="selectUser">
                  <el-table-column prop="userNum" label="档案编码" width="180"></el-table-column>
                  <el-table-column prop="name" label="老人姓名" width="180"></el-table-column>
                  <el-table-column prop="userGender" label="性别" width="180">
                    <template slot-scope="scope">{{scope.row.userGender == 0?"女":"男"}}</template>
                  </el-table-column>
                  <el-table-column prop="age" label="老人年龄" width="180"></el-table-column>
                  <el-table-column prop="areaName" label="入住区域" width="180"></el-table-column>
                  <el-table-column prop="roomnum" label="入住房间" width="180"></el-table-column>
                  <el-table-column prop="number" label="床位号" width="180"></el-table-column>
                  <el-table-column prop="inTime" label="入院时间" width="180"></el-table-column>
                  <el-table-column prop="empName" label="操作员" width="180"></el-table-column>
                  <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                      <span style="color: blue; cursor: pointer;" @click="selectUser(scope.row)">选择</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <!-- 放分页部分 -->
                <el-pagination
                  background
                  :page-sizes="[3, 5, 10, 20]"
                  :page-size="pageSize1"
                  :current-page="pageNum1"
                  layout="total, sizes, prev, pager, next"
                  @next-click="nextPage1"
                  @prev-click="prevPage1"
                  @size-change="sizeChange1"
                  @current-change="currentPage1"
                  :total="total1"
                ></el-pagination>
              </el-col>
            </el-row>
          </el-dialog>
        </div>
      </el-form>
    </el-card>
    <!-- 订餐页面 -->

    <el-card class="box-card" style="float: right; width: 1000px; margin: 10px;">
      <el-divider content-position="left">订餐页面</el-divider>
      <el-form :model="addNewForm" :rules="rules" ref="addNewForm">
        <p>选择订餐时间：</p>
        <el-form ref="addNewForm" :model="addNewForm" label-width="120px">
          <el-form-item label="开始时间">
            <el-date-picker
              type="datetime"
              placeholder="选择日期和时间"
              @change="handleChangeStartDate"
              v-model="addNewForm.startDate"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="结束时间">
            <el-date-picker
              type="datetime"
              placeholder="选择日期和时间"
              @change="handleChangeEndDate"
              v-model="addNewForm.endDate"
            ></el-date-picker>
          </el-form-item>
          <div class="total-cost" style="color: rgb(48, 12, 192); font-size: 1.5em;">总天数：{{ days }}</div>
          <el-form-item>
            <el-checkbox
              style="color: rgb(216, 11, 11); font-size: 1.5em;"
              v-model="addNewForm.autoRenew"
              true-label="1"
              false-label="0"
            >是否自动续期 (时间不足1天自动续当前套餐)</el-checkbox>
          </el-form-item>
        </el-form>
        <el-form-item label="选择套餐">
          <el-select
            placeholder="选择套餐"
            v-model="orderParam.foodPackageId"
            @change="loadFoodPackageLinkList"
          >
            <el-option v-for="c in foodPackageArr2" :key="c.id" :label="c.name" :value="c.id"></el-option>>
          </el-select>
        </el-form-item>
        <!-- 套餐展示表格 -->
        <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          border
          :data="foodPackageLinkArr"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column prop="foodPackageName" label="套餐名称"></el-table-column>
          <el-table-column prop="foodName" label="餐品名称"></el-table-column>
          <el-table-column prop="price" label="餐品价格"></el-table-column>
          <el-table-column label="餐品图片">
            <template slot-scope="scope">
              <img :src="scope.row.foodUrl" style="width:55%" size="50" />
              <!-- <img :src="require('../../../assets/food/' +scope.row.foodUrl)" width="50" /> -->
            </template>
          </el-table-column>
          <el-table-column prop="foodPackageLinkMeal" label="餐品种类"></el-table-column>
        </el-table>
        <div class="total-cost" :style="{ color: 'red', fontSize: '1.5em' }">套餐价格:{{ totalCost0 }}</div>

        <div class="total-cost" style="color: red; font-size: 1.5em;">总价：{{ totalCost }}</div>
        <div class="block" style>
          <el-pagination
            background
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize2"
            :current-page="pageNum2"
            layout="total, sizes, prev, pager, next"
            @next-click="nextPage2"
            @prev-click="prevPage2"
            @size-change="sizeChange2"
            @current-change="currentPage2"
            :total="total2"
          ></el-pagination>
        </div>
        <el-button type="primary" @click="addOlder">确定下单</el-button>
        <el-button type="primary" @click="remove">返回</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageNum1: 1,
      pageSize1: 10,
      total1: 0,
      pageNum2: 1,
      pageSize2: 10,
      total2: 0,
      selectedUser: null,
      olderDialogVisible: false,
      orderParam1: {
        name: ""
      },
      selectData: [],
      user: {},
      orderParam: {
        foodPackageId: ""
      },

      addNewForm: {
        foodPackageId: "",
        totalCost0: "",
        totalCost: "",
        startDate: "",
        endDate: "",
        autoRenew: 0,
        userNum: ""
      },
      lookVisible: false,
      formLabelWidth: "120px",
      foodPackageLinkArr: [],
      foodPackageArr2: [],
      rules: {
        name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
        foodId: [
          { required: true, message: "请输入食物名称", trigger: "blur" }
        ],
        foodPackageId: [
          { required: true, message: "请输入套餐名称", trigger: "blur" }
        ],
        meal: [
          { required: true, message: "请输入餐品使用时间", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    //分页1
    prevPage1(val) {
      //点击上一页触发
      this.pageNum1 = val;
      this.queryUser();
    },
    nextPage1(val) {
      //点击下一页触发
      this.pageNum1 = val;
      this.queryUser();
    },
    sizeChange1(val) {
      //val每一页条数
      this.pageNum1 = 1;
      this.pageSize1 = val;
      this.queryUser();
    },
    currentPage1(val) {
      this.pageNum1 = val;
      this.queryUser();
    },
    queryCondition1() {
      this.pageNum1 = 1;
      this.queryUser();
    },
    //分页2
    prevPage2(val) {
      //点击上一页触发
      this.pageNum2 = val;
      this.loadFoodPackageLinkList();
    },
    nextPage2(val) {
      //点击下一页触发
      this.pageNum2 = val;
      this.loadFoodPackageLinkList();
    },
    sizeChange2(val) {
      //val每一页条数
      this.pageNum2 = 1;
      this.pageSize2 = val;
      this.loadFoodPackageLinkList();
    },
    currentPage2(val) {
      this.pageNum2 = val;
      this.loadFoodPackageLinkList();
    },
    queryCondition2() {
      this.pageNum2 = 1;
      this.loadFoodPackageLinkList();
    },
    //选择用户
    selectUser(row, event) {
      this.resetForm(); //在这里调用 resetForm
      this.user = row;
      console.log(this.user);
      //  this.addNewForm.olderId = user.id; 保存老人的id到addNewForm
      this.lookVisible = false; // 选择用户后，关闭对话框

      this.user.gender = row.userGender == 0 ? "女" : "男";
      //this.queryOlder;
    },
    resetForm() {
      this.user = {};
    },

    //套餐餐品表格展示.关系展示，需要分页 foodPackageLinkArr
    loadFoodPackageLinkList() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      pageParam.pageNum = this.pageNum2;
      pageParam.pageSize = this.pageSize2;
      pageParam.param = this.orderParam;

      this.$axios.post("api/foodLink/queryFoodLink", pageParam).then(res => {
        if (res.data.code == 200) {
          let pageData = res.data.data;

          this.foodPackageLinkArr = pageData.list;
          console.log(this.foodPackageLinkArr);

          //给分页参数赋值
          this.total2 = pageData.total;
          this.pageNum2 = pageData.pageNum;
          this.pageSize2 = pageData.pageSize;
        }
      });
    },
    //已关联 加载所有foodPackage的列表 foodArr 不分页
    loadFoodPackageList2() {
      this.$axios.get("api/foodPackage/queryFoodPackageList").then(res => {
        if (res.data.code == 200) {
          this.foodPackageArr2 = res.data.data;
        }
      });
    },
    //查询所有用户
    queryInCare() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      pageParam.pageNum = this.pageNum1;
      pageParam.pageSize = this.pageSize1;
      pageParam.param = this.orderParam1;
      this.$axios.post("api/changeBed/queryInCare", pageParam).then(res => {
        if (res.data.code == 200) {
          let pageData = res.data.data;
          this.selectData = pageData.list;
          console.log("select" + this.selectData);
          //给分页参数赋值
          this.total1 = pageData.total;
          this.pageNum1 = pageData.pageNum;
          this.pageSize1 = pageData.pageSize;
        }
      });
    },
    //添加续期
    handleAutoRenewChange() {
      // 在这里可以获取到最新的 autoRenew 值，并执行额外的逻辑
      this.addNewForm.autoRenew = this.addNewForm.autoRenew ? 1 : 0;
      console.log(this.addNewForm.autoRenew);
    },
    // updateCost(event) {
    // this.addNewForm.totalCost0 = event.target.value;
    // },
    remove() {
      this.$router.push("olderFoodLinkView");
    },
    addOlder() {
      // 验证必填项
      if (
        !this.orderParam.foodPackageId ||
        !this.addNewForm.startDate ||
        !this.addNewForm.endDate ||
        !this.user.userNum ||
        !this.totalCost0
      ) {
        this.$message.error("请填写所有必填项！");
        return;
      }
      let addForm = {
        userNum: this.user.userNum,
        foodPackageId: this.orderParam.foodPackageId,
        autoRenew: this.addNewForm.autoRenew,
        gmtCreate: this.addNewForm.startDate,
        gmtModified: this.addNewForm.endDate,
        totalprice: this.totalCost0
      };
      console.log("公告: ", this.addForm);

      this.$axios.post("api/olderFood/addOlderFood", addForm).then(res => {
        if (res.data.code == 200) {
          this.$message.success("提交成功!");
          this.$router.push({ path: "/olderFoodLinkView" });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleChangeStartDate(date) {
      //this.addNewForm.startDate = this.formatDate(date);
      let startDate = new Date(date);
      startDate.setHours(0, 0, 0, 0);
      startDate = startDate.getTime() - 8 * 60 * 60 * 1000; //减去8小时
      this.addNewForm.startDate = new Date(startDate.getTime()).toISOString();
    },
    handleChangeEndDate(date) {
      //this.addNewForm.endDate = this.formatDate(date);
      let endDate = new Date(date);
      endDate.setHours(0, 0, 0, 0);
      endDate = endDate.getTime() - 8 * 60 * 60 * 1000; //减去8小时
      this.addNewForm.endDate = new Date(endDate.getTime()).toISOString();
    },
    formatDate(date) {
      if (!date) return null;

      return new Date(date).toISOString().substr(0, 10); // 日期格式化为 YYYY-MM-DD
    }
  },
  mounted() {
    this.loadFoodPackageList2();
  },
  computed: {
    totalCost() {
      // 计算套餐价格
      let packagePrice = this.foodPackageLinkArr.reduce(
        (total, item) => total + item.price,
        0
      );
      // 计算订购天数
      let startDate = new Date(this.addNewForm.startDate);
      let endDate = new Date(this.addNewForm.endDate);
      let days = (endDate - startDate) / (1000 * 60 * 60 * 24);

      // 计算总价格
      return (packagePrice * days).toFixed(1);
    },
    totalCost0() {
      // 计算套餐价格
      let packagePrice = this.foodPackageLinkArr.reduce(
        (total, item) => total + item.price,
        0
      );
      // 计算订购天数

      return packagePrice;
    },
    days() {
      let startDate = new Date(this.addNewForm.startDate);
      let endDate = new Date(this.addNewForm.endDate);
      let days = (endDate - startDate) / (1000 * 60 * 60 * 24) ;
      return days;
    }
  }
};
</script>

<style scoped>
.my-color {
  color: red;
  font-family: Arial;
}
.my-color label {
  color: rgb(112, 160, 236);
}
.custom-card {
  background-color: #aee2fc; /* 你想要的颜色 */
}
.card-wrapper {
  background-color: #f7cf08; /* 你想要的颜色 */
}
</style>